<template>
  <div class="app-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>合同详情</span>
          <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="$router.go(-1)"
          >
            返回
          </el-button>
        </div>
      </template>

      <el-form
        ref="form"
        :model="contractInfo"
        label-width="120px"
        :disabled="true"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="合同编号">
              <el-input v-model="contractInfo.contractNo" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="合同类型">
              <el-input v-model="contractInfo.type" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工姓名">
              <el-input v-model="contractInfo.employeeName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门">
              <el-input v-model="contractInfo.departmentName" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始日期">
              <el-input v-model="contractInfo.startDate" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期">
              <el-input v-model="contractInfo.endDate" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="试用期">
              <el-input v-model="contractInfo.probationPeriod" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-tag :type="contractInfo.status === 1 ? 'success' : 'info'">
                {{ contractInfo.status === 1 ? '生效中' : '已终止' }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="合同内容">
              <el-input
                v-model="contractInfo.content"
                type="textarea"
                :rows="4"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                v-model="contractInfo.remark"
                type="textarea"
                :rows="2"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <!-- 合同附件 -->
      <div class="attachments">
        <div class="section-title">合同附件</div>
        <el-table
          :data="attachments"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="name"
            label="文件名称"
            align="center"
          />
          <el-table-column
            prop="size"
            label="文件大小"
            align="center"
            width="120"
          />
          <el-table-column
            prop="uploadTime"
            label="上传时间"
            align="center"
            width="180"
          />
          <el-table-column
            label="操作"
            align="center"
            width="120"
          >
            <template #default="{row}">
              <el-button
                type="text"
                @click="handleDownload(row)"
              >
                下载
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  name: 'ContractDetail',
  setup() {
    const route = useRoute()
    const contractInfo = ref({
      contractNo: 'HT202401010001',
      type: '劳动合同',
      employeeName: '张三',
      departmentName: '技术部',
      startDate: '2024-01-01',
      endDate: '2027-01-01',
      probationPeriod: '3个月',
      status: 1,
      content: '合同内容...',
      remark: ''
    })

    const attachments = ref([
      {
        name: '劳动合同.pdf',
        size: '1.2MB',
        uploadTime: '2024-01-01 10:00:00'
      }
    ])

    const handleDownload = (file) => {
      // TODO: 实现文件下载功能
      console.log('下载文件:', file)
    }

    onMounted(() => {
      // TODO: 调用API获取合同详情
      console.log('合同ID:', route.params.id)
    })

    return {
      contractInfo,
      attachments,
      handleDownload
    }
  }
})
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin: 20px 0;
  padding-left: 10px;
  border-left: 3px solid #409EFF;
}

.attachments {
  margin-top: 30px;
}
</style>